<template>
  <div>
    <router-view></router-view>
  <div class="box">
    <ul class="navbar1">
      <li>
        <!-- 发布 -->
        <!-- <router-link to="PutOut"><img src="./imges/issue.png" alt=""> </router-link> -->
        <router-link :to="{name:'PutOut'}"><img src="./imges/issue.png" alt=""> </router-link>
      </li>
      <li>
        <!-- 交友社区 -->
        <router-link :to="{name:'MakingFriends'}"><img src="./imges/making.png" alt=""></router-link>
         <!-- <router-link :to="{name:'MakingFriends'}"><img src="./imges/making.png" alt=""></router-link> -->
      </li>
      <li>
        <!-- 首页 -->
        <!-- <router-link to="HomePage"><img src="./imges/home.png" alt=""></router-link> -->
        <router-link :to="{name:'HomePage'}"><img src="./imges/home.png" alt=""></router-link>
      </li>
      <li>
        <!-- 失寻中心 -->
        <!-- <router-link to="LostCenter"><img src="./imges/lost.png" alt=""></router-link> -->
        <router-link :to="{name:'LostCenter'}"><img src="./imges/lost.png" alt=""></router-link>
      </li>
      <li>
        <!-- 我的 -->
         <!-- <router-link to="MyMine"> <img src="./imges/my.png" alt=""></router-link> -->
          <router-link :to="{name:'MyMine'}"> <img src="./imges/my.png" alt=""></router-link>
          <!-- <router-link class="my" :to="{'MyMine'}"> 我的</router-link> -->
      </li>
  <div>
  <span>发布</span>
  <span>交友社区</span>
  <span>首页</span>
  <span>失寻中心</span>
  <span>我的</span>
 </div>
    </ul>
  </div>
 
  
   
  
</div>
</template>
<script>
export default {
  name: "navigationbar",
  // methods: {
  //   my() {
  //     this.$router.push({
       
  //       path: "navigationbar",
  //     });
  //   },
  // },
};
</script>

<style lang=less scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  /* width: 400px;
  height: 750px; */
  /* background-color: red; */
  /* display: flex;
  align-items: flex-end; */

  .navbar1 {
    width: 100%;
    height: 70px;
    background-color: peachpuff;
    /* margin-top: 500px; */
    a {
      text-decoration: none;
    }
    li {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      width: 70px;
      height: 60px;
      margin-left: 5px;
      height: 50px;
      width: 50px;
      justify-content: space-around;
      margin-left: 20px;
    }
    span{
      margin-right: 5.5px;
      margin-left: 30px;
      font-size: 10px;
    }
    img{
      width: 42px;
      height: 40px;
    }
    position: fixed;
    bottom: 0;
    z-index: 2;
  }
}
</style>